<template>
  <div class="details">
    <div class="box">
      <div class="tit">
        <div class="shu"></div>
        <div class="sanqi">{{details.name}}</div>
      </div>
      <div class="cont">
        <div class="item">
          <p class="name">汉语拼音</p>
          <p class="jieshao">{{details.pinyin}}</p>
        </div>
        <div class="item">
          <p class="name">参考价格</p>
          <p class="jieshao">{{details.proposed_price}}</p>
        </div>
        <div class="item">
          <p class="name">性状</p>
          <p class="jieshao">
            {{details.character}}
          </p>
        </div>
        <div class="item">
          <p class="name">成分</p>
          <p class="jieshao">
            {{details.functional_indication}}
          </p>
        </div>
        <div class="item">
          <p class="name">适应病症</p>
          <p class="jieshao">
            {{details.ingredient}}
          </p>
        </div>
        <div class="item">
          <p class="name">规格</p>
          <p class="jieshao">
            {{details.specification}}
          </p>
        </div>
        <div class="item">
          <p class="name">用法用量</p>
          <p class="jieshao">
            {{details.dosage}}
          </p>
        </div>
        <div class="item">
          <p class="name">不良反应</p>
          <p class="jieshao">
            {{details.advrea}}
          </p>
        </div>
        <div class="item">
          <p class="name">禁忌</p>
          <p class="jieshao">
            {{details.taboo}}
          </p>
        </div>
        <div class="item">
          <p class="name">注意事项</p>
          <p class="jieshao">
            {{details.precautions}}
          </p>
        </div>
        <div class="item">
          <p class="name">药物相互作用</p>
          <p class="jieshao">
            {{details.interactions}}
          </p>
        </div>
        <div class="item">
          <p class="name">药品封面图</p>
          <p class="jieshao">
            <img :src="details.cover" alt="">
          </p>
        </div>
      </div>
      <div class="daigouwufu" @click="daigouwufu">代购服务</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id:'',
        details:'',
      }
    },
    created() {
      this.id=this.$route.query.id
      var title=this.$route.query.title
     
      console.log(this.$route.query)
      document.getElementsByTagName("title")[0].innerText = title
      this.getdetails()
    },
    mounted(){
      
    },
    methods: {
      // 获取药品详情
      getdetails(){
        this.$get("api/gzh_index.php?action=yaopin_info", {
          id:this.id
        }).then(res => { 
          this.details = res.data
          console.log(this.details,'details')
        }).catch(err => {
          
        });
      },
      daigouwufu(){
        this.$router.push({ path: "/daigoufuwu" });
      }
    },
  }
</script>

<style scoped>
.details{
  width: 100%;
}
.box{
  width: 100%;
}
.tit{
  width: 691px;
  height: 81px;
  margin: auto;
  display: flex;
  align-items: center;
  border-bottom: 1PX solid #F2E7D5;
}
.tit .shu{
  width:4px;
  height:26px;
  background:rgba(62,191,82,1);
  margin-right: 17px;
}
.tit .sanqi{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:36px;
}
.box{
  width: 700px;
  margin: auto;
}
.item{
  width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  margin-top: 35px;
}
.name{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:42px;
}
.jieshao{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:bold;
  color:#666;
  line-height:42px;
}
.daigouwufu{
  width: 160px;
  height: 60px;
  margin: auto;
  text-align: center;
  line-height: 60px;
  border-radius: 8px;
  background: #fff;
  color: #333;
  border: 2px solid #333;
  font-size: 28px;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>